import {useState} from 'react';
import {motion, AnimatePresence} from 'framer-motion';
import HomeIcon from '@/assets/images/tabbar/icon-home.png';
import HomeActiveIcon from '@/assets/images/tabbar/icon-home-active.png';
import OrderIcon from '@/assets/images/tabbar/icon-order.png';
import OrderActiveIcon from '@/assets/images/tabbar/icon-order-active.png';
import Mineicon from '@/assets/images/tabbar/icon-mine.png';
import MineActiveIcon from '@/assets/images/tabbar/icon-mine-active.png';
import HomeView from '@/views/home';
import MineView from '@/views/mine';
import OrderView from '@/views/order';

const TabbarItem = ({
  title,
  onClick,
  url,
  isActive,
}: {
  title: string;
  isActive: boolean;
  url: string;
  onClick: () => void;
}) => {
  return (
    <div
      onClick={onClick}
      className={`${
        isActive ? ' text-[#FFC746]' : '  text-[#ffffff]'
      } flex-1 flex flex-col justify-center items-center`}>
      <img src={url} className="w-[36px] h-[36px]" />
      <span className="flex justify-center font-[500] text-[16px] items-center">
        {title}
      </span>
    </div>
  );
};

const Base = () => {
  const [active, setActive] = useState(0);

  const list = [
    {
      title: '首页',
      url: HomeIcon,
      activeUrl: HomeActiveIcon,
      component: <HomeView />,
    },
    {
      title: '记录',
      url: OrderIcon,
      activeUrl: OrderActiveIcon,
      component: <OrderView />,
    },
    {
      title: '我的',
      url: Mineicon,
      activeUrl: MineActiveIcon,
      component: <MineView />,
    },
  ];

  const handleTabChange = (index: number) => {
    setActive(index);
  };

  return (
    <div className="h-full flex flex-col overflow-hidden">
      <div className="flex-1 relative">
        <AnimatePresence mode="wait" custom={'right'}>
          <motion.div
            key={active}
            custom={'right'}
            initial={{opacity: 0, x: -50}}
            animate={{opacity: 1, x: 0}}
            exit={{opacity: 0, x: 0}}
            transition={{duration: 0.3}}
            className="absolute inset-0">
            {list[active].component}
          </motion.div>
        </AnimatePresence>
      </div>
      <div className="overflow-hidden h-[80px] items-center flex justify-center shadow-[0px_-2px_8px_#FFD166] rounded-t-[24px]">
        {list.map((item, index) => (
          <TabbarItem
            key={index}
            title={item.title}
            isActive={active === index}
            url={active === index ? item.activeUrl : item.url}
            onClick={() => handleTabChange(index)}
          />
        ))}
      </div>
    </div>
  );
};

export default Base;
